<template>
	<view class="container">
		<!-- 布局：分为两列 -->
		<view class="main-content-frequency">
			<!-- 选项按钮 -->
			<view class="options">
				<view class="options-text">
					<text>力度强</text>
				</view>
				<view class="slider-container" @touchstart="handleTouchStart" @touchmove="drag" @touchend="stopDrag">
					<!-- bg.png作为背景 -->
					<image src="/static/bg.png" class="bg-image"></image>
					<!-- points.png作为滑块 -->
					<image src="/static/points.png" class="points-image" :style="pointsStyle"></image>
				</view>
				<view class="options-text">
					<text>力度弱</text>
				</view>
			</view>
		</view>
		<!-- start-column 放在右下角，并且按钮上下排列 -->
		<view class="start-column-frequency">
			<view class="start-column-header">
				<image src="/static/plus-add.png"></image>
			</view>
			<view class="percentage">
				<text>{{ frequency }}%</text>
			</view>
			<view class="start-column-header">
				<image src="/static/plus-sub.png"></image>
			</view>
			<button class="start-button" @click="startGame">开始/结束</button>
			<image src="/static/start.png" alt="Start Icon" />

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				frequency: 50, // 默认频率
				dragging: false, // 是否正在拖动
				startY: 0, // 拖动开始的Y坐标
				currentY: 0, // 当前拖动的Y坐标
				pointsPosition: 0, // 初始位置设置为0
				containerTop: 0, // slider-container的顶部位置
				maxHeight: 210, // 背景图片的最大高度
			};
		},
		computed: {
			pointsStyle() {
				return {
					top: `${this.pointsPosition}px`, // 控制滑块的垂直位置
				};
			},
		},
		methods: {
			// 处理点击事件并更新滑块位置
			handleTouchStart(event) {
				// 获取触摸点相对于页面的位置
				const touchY = event.touches[0].pageY;

				// 获取容器顶部位置
				const query = wx.createSelectorQuery();
				query.select('.slider-container').boundingClientRect((rect) => {
					this.containerTop = rect.top; // 获取slider-container相对于页面的顶部位置
					this.updateSliderPosition(touchY);
					this.dragging = true; // 开始拖动
					this.startY = touchY; // 记录起始位置
				}).exec();
			},

			// 更新滑块位置并更新频率
			updateSliderPosition(touchY) {
				let position = touchY - this.containerTop;

				// 限制滑块的范围
				if (position < 0) {
					position = 0;
				} else if (position > this.maxHeight) {
					position = this.maxHeight;
				}

				// 更新滑块位置
				this.pointsPosition = position;

				// 根据滑块位置更新frequency (确保 frequency 在 0 到 100 之间)
				this.frequency = Math.round((this.pointsPosition / this.maxHeight) * 100);
			},

			// 拖动过程
			drag(event) {
				if (!this.dragging) return;

				let moveY = event.touches[0].pageY - this.startY; // 计算偏移量
				this.currentY = this.pointsPosition + moveY;

				// 限制滑块的范围（上下方向）
				if (this.currentY < 0) {
					this.currentY = 0;
				} else if (this.currentY > this.maxHeight) {
					this.currentY = this.maxHeight;
				}

				// 更新滑块位置
				this.pointsPosition = this.currentY;

				// 根据滑块位置更新frequency
				this.frequency = Math.round((this.pointsPosition / this.maxHeight) * 100); // 确保 frequency 在 0 到 100 之间

				// 更新起始位置
				this.startY = event.touches[0].pageY;
			},

			// 停止拖动
			stopDrag() {
				this.dragging = false;
			},

			startGame() {
				// 开始游戏的逻辑
				let ctrlMachine = uni.getStorageSync("ctrlMachine");
				console.log(ctrlMachine)
				this.$api.post({
					url: '/common/startPowerMode',
					loadingTip: '正在设置球速...',
					data: {
						powerData,
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: '球速设置成功',
							icon: 'success',
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		color: #fff;
		// height: 100vh;
		overflow-y: hidden;
		width: 100%;
	}

	.main-content-frequency {
		display: flex;
		justify-content: space-between;
		width: 350px;
		margin: 0 0 126px 117rpx;
	}

	.options {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.options-text {
		margin: 10px;
		font-size: 20px;
	}

	.slider-container {
		width: 134rpx;
		position: relative;
		height: 523rpx;
	}

	.bg-image {
		width: 100%;
		height: 100%;
	}

	.points-image {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 44rpx;
		height: 44rpx;
		z-index: 10;
		cursor: pointer;
	}

	.start-column-frequency {
		position: absolute;
		bottom: 63rpx;
		/* 离底部 20px */
		right: 61rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.start-column-header {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		// margin-top: 121rpx;

		image {
			height: 96rpx;
			width: 96rpx;
		}
	}

	.percentage {
		margin: 10px;
		font-size: 24px;
	}

	.start-button {
		width: 100%;
		border-radius: 10px;
		background-color: transparent;
		color: #FFFFFF;
		font-size: 36rpx;
		text-align: center;
		border: none;
		transition: all 0.3s ease;
	}

	.start-button:hover {
		cursor: pointer;
	}

	.start-button:focus {
		outline: none;
	}

	image {
		width: 182rpx;
		height: 182rpx;
	}
</style>